import React, { useState, useEffect } from 'react'
import {useNavigate, useLocation } from 'react-router-dom';

import { Menu } from 'antd';
import { BookOutlined, DashboardOutlined, UserOutlined, FileOutlined } from '@ant-design/icons';

export default function SiderMenu() {
  const { SubMenu } = Menu;
  const navigate = useNavigate()
  const location = useLocation()
  const { pathname } = location
  const [selectKey, setKey] = useState(['dashboard'])
  useEffect(() => {
    setKey(pathname.split('/'))
  },[location])

  // 选择菜单内容
  function changeMenu({ keyPath }) {
    setKey(keyPath)
    let path = ''
    for (let i = keyPath.length - 1; i >= 0; i--) {
      path += '/' + keyPath[i]
    }
    navigate(path)
  }
  return (
    <div>
       <Menu
            selectedKeys={selectKey}
            defaultOpenKeys={['file']}
            mode="inline"
            theme="dark"
            onClick={changeMenu}
          >
            <Menu.Item key="dashboard" icon={<DashboardOutlined />}>仪表盘</Menu.Item>
            <SubMenu key="file" icon={<FileOutlined />} title="文章管理">
              <Menu.Item key="write">写文章</Menu.Item>
              <Menu.Item key="fileList">文章列表</Menu.Item>
            </SubMenu>
            <Menu.Item key="category" icon={<BookOutlined />}>分类列表</Menu.Item>
            <Menu.Item key="users" icon={<UserOutlined />}>用户列表</Menu.Item>
          </Menu>
    </div>
  )
}
